<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:fb="http://ogp.me/ns/fb#" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML Editor | Design Blogger Templates and Widgets</title>
<meta content='Learn How to Design Blogger Templates and Create Blogger Widgets Using this HTML Editor.' name='description'/>
<meta content='Design Blogger Templates, Design Blogger Widgets, Create Widgets, CSS, HTML, Javascript' name='keywords'/>
<script type='text/javascript' src='scripts/editor.js'></script>
<link href='http://lh4.ggpht.com/_7wsQzULWIwo/SvZu8ooXoQI/AAAAAAAACJk/78jXTrMVkM8/s800/MBT-favicon.gif' rel='icon' type='image/gif'/>

<script type="text/javascript">
   
////////////////////////////////////////////////////////////////////
// Setting

var rate = 20;  // Increase amount(The degree of the transmutation)


////////////////////////////////////////////////////////////////////
// Main routine

if (document.getElementById)
window.onerror=new Function("return true")

var objActive;  // The object which event occured in
var act = 0;    // Flag during the action
var elmH = 0;   // Hue
var elmS = 128; // Saturation
var elmV = 255; // Value
var clrOrg;     // A color before the change
var TimerID;    // Timer ID


if (document.all) {
    document.onmouseover = doRainbowAnchor;
    document.onmouseout = stopRainbowAnchor;
}
else if (document.getElementById) {
    document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT);
    document.onmouseover = Mozilla_doRainbowAnchor;
    document.onmouseout = Mozilla_stopRainbowAnchor;
}


//=============================================================================
// doRainbow
//  This function begins to change a color.
//=============================================================================
function doRainbow(obj)
{
    if (act == 0) {
        act = 1;
        if (obj)
            objActive = obj;
        else
            objActive = event.srcElement;
        clrOrg = objActive.style.color;
        TimerID = setInterval("ChangeColor()",100);
    }
}


//=============================================================================
// stopRainbow
//  This function stops to change a color.
//=============================================================================
function stopRainbow()
{
    if (act) {
        objActive.style.color = clrOrg;
        clearInterval(TimerID);
        act = 0;
    }
}


//=============================================================================
// doRainbowAnchor
//  This function begins to change a color. (of a anchor, automatically)
//=============================================================================
function doRainbowAnchor()
{
    if (act == 0) {
        var obj = event.srcElement;
        while (obj.tagName != 'A' && obj.tagName != 'BODY') {
            obj = obj.parentElement;
            if (obj.tagName == 'A' || obj.tagName == 'BODY')
                break;
        }

        if (obj.tagName == 'A' && obj.href != '') {
            objActive = obj;
            act = 1;
            clrOrg = objActive.style.color;
            TimerID = setInterval("ChangeColor()",100);
        }
    }
}


//=============================================================================
// stopRainbowAnchor
//  This function stops to change a color. (of a anchor, automatically)
//=============================================================================
function stopRainbowAnchor()
{
    if (act) {
        if (objActive.tagName == 'A') {
            objActive.style.color = clrOrg;
            clearInterval(TimerID);
            act = 0;
        }
    }
}


//=============================================================================
// Mozilla_doRainbowAnchor(for Netscape6 and Mozilla browser)
//  This function begins to change a color. (of a anchor, automatically)
//=============================================================================
function Mozilla_doRainbowAnchor(e)
{
    if (act == 0) {
        obj = e.target;
        while (obj.nodeName != 'A' && obj.nodeName != 'BODY') {
            obj = obj.parentNode;
            if (obj.nodeName == 'A' || obj.nodeName == 'BODY')
                break;
        }

        if (obj.nodeName == 'A' && obj.href != '') {
            objActive = obj;
            act = 1;
            clrOrg = obj.style.color;
            TimerID = setInterval("ChangeColor()",100);
        }
    }
}


//=============================================================================
// Mozilla_stopRainbowAnchor(for Netscape6 and Mozilla browser)
//  This function stops to change a color. (of a anchor, automatically)
//=============================================================================
function Mozilla_stopRainbowAnchor(e)
{
    if (act) {
        if (objActive.nodeName == 'A') {
            objActive.style.color = clrOrg;
            clearInterval(TimerID);
            act = 0;
        }
    }
}


//=============================================================================
// Change Color
//  This function changes a color actually.
//=============================================================================
function ChangeColor()
{
    objActive.style.color = makeColor();
}


//=============================================================================
// makeColor
//  This function makes rainbow colors.
//=============================================================================
function makeColor()
{
    // Don't you think Color Gamut to look like Rainbow?

    // HSVtoRGB
    if (elmS == 0) {
        elmR = elmV;    elmG = elmV;    elmB = elmV;
    }
    else {
        t1 = elmV;
        t2 = (255 - elmS) * elmV / 255;
        t3 = elmH % 60;
        t3 = (t1 - t2) * t3 / 60;

        if (elmH < 60) {
            elmR = t1;  elmB = t2;  elmG = t2 + t3;
        }
        else if (elmH < 120) {
            elmG = t1;  elmB = t2;  elmR = t1 - t3;
        }
        else if (elmH < 180) {
            elmG = t1;  elmR = t2;  elmB = t2 + t3;
        }
        else if (elmH < 240) {
            elmB = t1;  elmR = t2;  elmG = t1 - t3;
        }
        else if (elmH < 300) {
            elmB = t1;  elmG = t2;  elmR = t2 + t3;
        }
        else if (elmH < 360) {
            elmR = t1;  elmG = t2;  elmB = t1 - t3;
        }
        else {
            elmR = 0;   elmG = 0;   elmB = 0;
        }
    }

    elmR = Math.floor(elmR).toString(16);
    elmG = Math.floor(elmG).toString(16);
    elmB = Math.floor(elmB).toString(16);
    if (elmR.length == 1)    elmR = "0" + elmR;
    if (elmG.length == 1)    elmG = "0" + elmG;
    if (elmB.length == 1)    elmB = "0" + elmB;

    elmH = elmH + rate;
    if (elmH >= 360)
        elmH = 0;

    return '#' + elmR + elmG + elmB;
}
</script>
<style type="text/css">

body{position:relative;overflow-x:hidden;width:1007px;margin:0 auto;padding:0;background:rgba(0,0,0,.05);font-family: Georgia, "Times New Roman", Times, serif;font-size:13px;}
.codebox{
 margin:0px;
 color:#222;
 font-size:12px;
 font-weight:400;
 border:double 5px #666;
 padding: 5px;
 min-width:200px;
 width:400px;
 max-width:400px;
 height:500px;
 overflow:auto;
 margin-left:0;
 line-height:22px;
}
.GRpreview{
 height:500px;
 width:540px;
 border:double 5px #666;
 padding:5px;
}
.GRpreview{
      height:560px;
      width:500px;
      border:double 5px #666;
      padding:5px;
}
td.yourprev{
      position:fixed;
      width:540px;
      left:450px;
      top:110px;
      transition:0.2s;
      -o-transition:0.2s;
      -ms-transition:0.2s;
      -moz-transition:0.2s;
      -webkit-transition:0.2s;  
}
td.yourprev:hover{
      position:fixed;
      left:0px;
      top:60px;
      width:1002px;
      background:#fff;
      transition:0.2s;
      -o-transition:0.2s;
      -ms-transition:0.2s;
      -moz-transition:0.2s;
      -webkit-transition:0.2s;
}
td.yourprev iframe.GRpreview{width:100%;}
td.yourprev:hover iframe.GRpreview{width:100%;}
header{position:relative;display:block;width:100%;height:60px;background:rgba(0,0,0,.8);margin:0;}
.mycode{
 position:fixed;
 padding:5px 10px;
 background:#fff;
 border-radius:5px;
 width:90px;
 height:30px;
 top:10px;
 right:20px;
 font-size:16px;
 overflow:hidden;
 }
.mycode:hover{
 width:540px;
 height:610px;
 z-index:9999999;
 }
</style>

</head>
<body>
<header>
<div style="width:400px;margin-top:20px;padding:0 10px;float:left;">
<button onclick="preview.document.write (document.getElementsByTagName ('textarea')[0].value); preview.document.close(); preview.focus()">Edit Code and Click to Preview</button>
<button onclick="window.document.form2.code.value='';preview.document.write (document.getElementsByTagName ('textarea')[0].value); preview.document.close(); preview.focus()">
Clear </button>
</div>
<div class="mycode"><span style="display:block;float:right;padding:0;text-align:center;">Daftar Code</span>

</div>
</header>
<table width="771" border="1" style="font-size:10px;margin-left:0px;">
  <tr>
    <td width="53">&lt;html&gt;</td>
    <td width="51">&lt;head&gt;</td>
    <td width="50">&lt;/body&gt;</td>
    <td width="101">&lt;!DOCTYPE html&gt;</td>
    <td width="108">&lt;style type='text/css'&gt;</td>
    <td width="149">&lt;script type='text/javascript'&gt;</td>
    <td width="33">&lt;div&gt;</td>
    <td width="31">&lt;p&gt;</td>
    <td width="41">class</td>
    <td width="33">id</td>
    <td width="51">&nbsp;</td>
  </tr>
  <tr>
    <td height="23">&lt;/html&gt;</td>
    <td>&lt;/head&gt;</td>
    <td>&lt;/body&gt;</td>
    <td>&nbsp;</td>
    <td>&lt;/style&gt;</td>
    <td>&lt;/script&gt;</td>
    <td>&lt;/div&gt;</td>
    <td>&lt;/p&gt;</td>
    <td>width</td>
    <td>height</td>
    <td>&nbsp;</td>
  </tr>
</table>
<table style="width:100%;background:rgba(0,0,0,.1);margin:0;">
<tr> 
<td valign="top">

<form name="form2" method="post">
<textarea class="codebox" name="code" onClick="focus(this.code)">
<!DOCTYPE html>
<html>
<head>  
<style type="text/css"> 
.uhuk{position:relative;width:200px;height:200px;}
.satu{
  position:absolute;
  left:0;
  top:0;
  width:200px;
  height:200px;
  display:block;
  background:url(https://lh6.googleusercontent.com/-7jZDILN61TQ/UBO6NxpDhmI/AAAAAAAAAAc/ih9wXFd0oRI/s128/gubhugreyot-April-2012.jpg) center no-repeat;
  background-size:200px auto;
   margin:30px auto;
   -moz-transition:1s;
}
.uhuk:hover .satu{
  -moz-backface-visibility:visible;
   transform:rotateY(180deg);
  -webkit-transform:rotateY(180deg);
  -moz-transform:rotateY(180deg); 
}
</style>
</head>
<body>
<div>
Hello. This is a DIV element.</div>

<div class="uhuk">
<div class="satu">
</div>
<div class="dua">
</div>
</div>
</body>
</html>








</textarea>
</form>
</td>
<td valign="top" class="yourprev">
<iframe class="GRpreview" src="about:blank" name="preview" frameborder="0" style="display:block;margin:0 auto;"></iframe>
</td>
</tr>
</table>



</body>
</html>